<template>
  <view class="container">
    <image class="bg-image" src="/static/image.jpg" mode="aspectFill"></image>
    
    <view class="content">
      <!-- 顶部词库信息 -->
      <view class="word-bank">
        <view class="bank-header">
          <view class="bank-title">
            <image class="bank-icon" src="/static/word-icon.png" mode="aspectFit"/>
            <text>{{ currentDictionary.dictionary_name || '未选择词典' }}</text>
            <text class="edit" @click="goToBook">修改 ></text>
          </view>
          
        </view>
      </view>

      <!-- 今日计划 -->
      <view class="plan-section">
        <!-- 开始按钮 -->
        <button class="start-btn" @click="startLearning">开始背单词</button>
      </view>

      <!-- 功能按钮组 -->
      <view class="function-group">
        <view class="function-btn" @click="goToWordbook">
          <text>单词本</text>
        </view>
        <view class="function-btn" @click="goToTest">
          <text>测试</text>
        </view>
        <view class="function-btn" @click="goToRecords">
          <text>学习记录</text>
        </view>
      </view>

      <!-- 信息区域 -->
      <view class="info-section">
        <view class="info-header">
          <text class="info-title">信息</text>
          <text class="more" @click="goToArticleList">更多 ></text>
        </view>
        
        <view class="info-card">
          <view class="info-item" @click="showArticleContent" v-if="firstArticle">
            <view class="item-header">
                <text class="item-title">· 每日阅读</text>
				
            </view>
            <view class="article-preview">
                <text class="article-title">{{ firstArticle.article_title }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部导航栏 -->
      <view class="tab-bar">
        <view class="tab-item active">
          <image src="/static/home.png" mode="aspectFit" class="tab-icon"/>
        </view>
        <view class="tab-item" @click="goToMe">
          <image src="/static/me.png" mode="aspectFit" class="tab-icon"/>
        </view>
      </view>

     
    </view>
  </view>
</template>

<script>
import { get_approved_articles, test } from '@/api/user.js'

export default {
  data() {
    return {
      currentDictionary: {
        dictionary_id: '',
        dictionary_name: '',
        plan_id: ''
      },
      firstArticle: null,
      articles: []
    }
  },
  async onShow() {
    this.updateCurrentDictionary()
    await this.loadArticle()
  },
  onLoad() {
    this.updateCurrentDictionary()
    this.loadArticles()
  },
  methods: {
    updateCurrentDictionary() {
      const dictionary = uni.getStorageSync('currentDictionary')
      console.log('获取到的词典信息：', dictionary)

      if (dictionary && dictionary.dictionary_name) {
        this.currentDictionary = dictionary
        console.log('更新后的当前词典：', this.currentDictionary)
      }
    },
    goToMe() {
      uni.navigateTo({
        url: '/pages/home/me'
      })
    },
    goToBook() {
      uni.navigateTo({
        url: '/pages/home/book'
      })
    },
    startLearning() {
      if (!this.currentDictionary.dictionary_id) {
        uni.showToast({
          title: '请先选择词典',
          icon: 'none'
        })
        return
      }
      uni.navigateTo({
        url: '/pages/home/word'
      })
    },
    goToRecords() {
      uni.navigateTo({
        url: '/pages/home/records'
      })
    },
    async loadArticles() {
      try {
        const res = await get_approved_articles()
        if (res.code === '2000' && res.data.length > 0) {
          this.articles = res.data
          this.firstArticle = res.data[0]
        }
      } catch (error) {
        console.error('获取文章失败：', error)
      }
    },
    showArticleContent() {
      if (this.firstArticle) {
        // 存储完整的文章数据
        uni.setStorageSync('currentArticle', {
          article_title: this.firstArticle.article_title,
          article_content: this.firstArticle.article_content,
          create_time: this.firstArticle.create_time
        })
        
        // 跳转到文章详情页
        uni.navigateTo({
          url: `/pages/article/detail?id=${this.firstArticle.article_id}`
        })
      }
    },
    goToArticleList() {
      uni.navigateTo({
        url: '/pages/article/list'
      })
    },
    async loadArticle() {
      try {
        const res = await get_approved_articles()
        if (res.code === '2000' && res.data.length > 0) {
          this.firstArticle = res.data[0]
        }
      } catch (error) {
        console.error('获取文章失败：', error)
      }
    },
    goToArticleDetail() {
      if (this.firstArticle) {
        uni.navigateTo({
          url: `/pages/article/detail?id=${this.firstArticle.article_id}`
        })
      }
    },
    goToWordbook() {
      uni.navigateTo({
        url: '/pages/home/wordbook'
      })
    },
    async goToTest() {
        if (!this.currentDictionary.dictionary_id) {
            uni.showToast({
                title: '请先选择词典',
                icon: 'none'
            })
            return
        }

        try {
            const res = await test(this.currentDictionary.dictionary_id)
            console.log('获取测试题响应：', res)
            
            if (res.code === '2000') {
                // 将测试题数据存储到本地
                uni.setStorageSync('testQuestions', res.data)
                // 跳转到测试页面
                uni.navigateTo({
                    url: '/pages/test/index'
                })
            } else {
                uni.showToast({
                    title: res.message || '获取测试题失败',
                    icon: 'none'
                })
            }
        } catch (error) {
            console.error('获取测试题失败:', error)
            uni.showToast({
                title: '获取测试题失败，请重试',
                icon: 'none'
            })
        }
    }
  }
}
</script>

<style>
.container {
 width: 100%;
 height: 100vh;
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 overflow: hidden;
}

.bg-image {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}

.content {
  position: relative;
  z-index: 1;
  padding: 20px;
}

/* 统一调整所有卡片样式 */
.word-bank,
.plan-section,
.function-btn,
.info-section,
.info-card {
  background: rgba(255, 255, 255, 0.2);  /* 统一使用高透明度 */
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  margin-top: 50px;
}

/* 调整各个部分的特定样式 */
.word-bank {
  padding: 15px;
  margin-bottom: 20px;
}

.plan-section {
  padding: 20px;
  margin-bottom: 20px;
}

.function-btn {
  background: rgba(107, 75, 138, 0.6);  /* 紫色半透明背景 */
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 15px 30px;
  text-align: center;
  flex: 1;
  margin: 0 5px;
  transition: all 0.3s ease;  /* 添加过渡效果 */
}

.function-btn text {
  color: #fff;  /* 白色文字 */
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 按钮悬停效果 */
.function-btn:active {
  background: rgba(107, 75, 138, 0.8);  /* 点击时加深颜色 */
  transform: scale(0.98);  /* 轻微缩小效果 */
}

.info-section {
  padding: 15px;
}

.info-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 15px;
  margin: 10px 0;
}

/* 调整文字颜色确保可读性 */
.bank-title text,
.section-title,
.plan-label,
.plan-number,
.info-title,
.menu-text,
.item-title,
.item-desc {
  color: #333;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
}

.start-btn {
 background: rgba(107, 75, 138, 0.9);
  backdrop-filter: blur(5px);
}

/* 底部导航栏样式调整 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 10px 0;
  z-index: 2;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.tab-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.active .tab-text {
  color: #fff;
  font-weight: 500;
}
/* 
.active .tab-icon {
  width: 40px;
  height: 40px;
  opacity: 1;
  transform: scale(1.1);
} */

.bank-header {
  display: flex;
  flex-direction: column;
}

.bank-title {
  display: flex;
  align-items: center;
}

.bank-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.edit {
  margin-left: 100px;
  color: #999;
  font-size: 14px;
}

.progress {
  margin-top: 8px;
  color: #666;
  font-size: 14px;
}

.plan-cards {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.plan-card {
  text-align: center;
}

.plan-label {
  font-size: 14px;
  color: #333;
}

.plan-number {
  font-size: 24px;
  font-weight: bold;
  margin: 5px 0;
  color: #333;
}

.plan-unit {
  font-size: 12px;
  color: #666;
}

.function-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.info-title {
  font-size: 16px;
  font-weight: 500;
}

.more {
  color: #999;
  font-size: 14px;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.item-desc {
  font-size: 14px;
  color: #666;
}

.start-btn {
  background: rgba(107, 75, 138, 0.9);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  color: #fff;
  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 16px;
}

.edit {
  color: #666;
  font-size: 14px;
  margin-left: 10px;
  /* 添加点击效果 */
  transition: opacity 0.3s ease;
}

.edit:active {
  opacity: 0.7;
}

.daily-reading {
  margin: 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.more-btn {
  font-size: 14px;
  color: #666;
}

.article-preview {
  padding: 10px 0;
}

.article-title {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.article-preview {
  margin-top: 5px;
}

.article-title {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.info-item {
  cursor: pointer;
}

.info-item:active {
  opacity: 0.8;
}

</style>
